<template>
  <div class="padding-trbl-20 margin-b-60 contentBox">
    <div class="flex-row width100 card1">
      <el-card class="rela">
        <Title title="年度办理量统计"></Title>
        <div class="text-gray font-12 company abso">
          单位：件
        </div>
        <div
          class="annual_card1Echart margin-t-60 padding-l-10"
          id="annual_card1Echart"
        ></div>
      </el-card>
    </div>
    <div class="flex-row width100 card2 margin-t-20">
      <el-card class="rela">
        <Title title="年度工单来源统计"></Title>
        <div class="text-gray font-12 company abso">
          单位：件
        </div>
        <div
          class="annual_card2Echart padding-l-20"
          id="annual_card2Echart"
        ></div>
      </el-card>
    </div>
    <div class="flex-row width100 card3 margin-t-20">
      <el-card class="rela">
        <Title title="年度退单量统计"></Title>
        <div class="text-gray font-12 company abso">
          单位：件
        </div>
        <div
          class="annual_card3Echart padding-l-20 margin-t-30"
          id="annual_card3Echart"
        ></div>
      </el-card>
    </div>
    <div class="flex-row width100 card4 margin-t-20">
      <el-card class="rela">
        <Title title="年度超期件统计"></Title>
        <div class="text-gray font-12 company abso">
          单位：件
        </div>
        <div
          class="annual_card4Echart padding-l-20 margin-t-30"
          id="annual_card4Echart"
        ></div>
      </el-card>
    </div>
    <div class="flex-row width100 card5 margin-t-20">
      <el-card class="rela">
        <Title title="平均回复周期统计"></Title>
        <div class="text-gray font-12 company abso">
          单位：天
        </div>
        <div
          class="annual_card5Echart padding-l-20 margin-t-20"
          id="annual_card5Echart"
        ></div>
      </el-card>
    </div>
    <div class="flex-row width100 card6 margin-t-20">
      <el-card class="rela">
        <Title title="年度满意率统计"></Title>
        <div class="text-gray font-12 company abso">
          单位：%
        </div>
        <div
          class="annual_card6Echart padding-l-20 margin-t-20"
          id="annual_card6Echart"
        ></div>
      </el-card>
    </div>
    <!-- 工单列表 -->
    <el-dialog
      title="工单列表"
      :visible.sync="orderListShow"
      width="100%"
      :fullscreen="fullScreen"
      @close="clearSearch"
    >
      <orderList
        v-if="orderListShow"
        ref="orderlist"
        :duration="duration"
        :date="date"
        :sourceId="sourceId"
        :orderType="orderType"
      ></orderList>
    </el-dialog>
  </div>
</template>
<script>
import Title from '../../../components/title.vue'
import * as echarts from 'echarts'
import orderList from './order/orderlist.vue'
export default {
  components: {
    Title,
    orderList
  },
  data () {
    return {
      card1Data: {
        total: {},
        list: []
      },
      lastMonth: 1,
      orderState: [],
      orderStateColor: ['#35ca1c', '#6d9fff', '#9865ff'],
      repeatList: [],
      replatSortArray: [],
      replatShowIndex: -1,
      maxReplat: 0,
      // 不满意件
      card7Data: [],
      monthList: [
        '01月',
        '02月',
        '03月',
        '04月',
        '05月',
        '06月',
        '07月',
        '08月',
        '09月',
        '10月',
        '11月',
        '12月'
      ],
      selectTimeVal: '',
      systemYear: '',
      pickerOptions: {
        disabledDate (time) {
          let startYear = '1577808000000'
          return time.getTime() > Date.now() || time.getTime() < startYear
        }
      },
      currentPage: {
        current: 1,
        size: 20
      },
      totalSize: 0,
      maskShow: false,
      maskType: '',
      orderListShow: false,
      fullScreen: true,
      sourceList: [
        { id: '10000', label: '市长信箱' },
        { id: '12306', label: '市人社局长信箱' },
        { id: '12333', label: '信访信息系统' },
        { id: '10010', label: '大联动' },
        { id: '12388', label: '人民网' },
        { id: '12580', label: '企业服务网' },
        { id: '10086', label: '公众信息网' }
      ],
      duration: null,
      date: null,
      sourceId: null,
      orderType: null
    }
  },
  mounted () {
    this.getYearGdBl()
    this.getGdLy()
    this.getTdl()
    this.getCqj()
    this.getHfZq()
    this.getMyl()
  },
  methods: {
    // 获取数据 年度办理量
    async getYearGdBl () {
      const that = this
      this.$axios.post(this.$api.reportform.getYearGdBl).then(res => {
        let yearList = []
        let yearIndex = 0
        let year = ''
        res[0].forEach((item, index) => {
          if (item.indexOf('年') > 0) {
            year = item.slice(0, 4)
            yearIndex = index
          }
          if (index >= yearIndex) {
            yearList.push(year)
          }
        })

        const nb_chartDom1 = document.getElementById('annual_card1Echart')
        const nb_myChart1 = echarts.init(nb_chartDom1)
        const nb_option1 = {
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: res[0]
          },
          yAxis: {
            type: 'value'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
              textStyle: {
                color: '#fff'
              }
            },
            formatter: function (params) {
              return (
                params[0].name +
                '<br/><span style="display: inline-block;width:10px;height:10px;border-radius:100%;background: #74B2FF;margin-right:5px;"></span>' +
                params[0].seriesName +
                '<span style="display: inline-block;width: 14px;"></span><span style="font-weight: bold;">' +
                params[0].value +
                '</span><span style="font-size: 10px;"> 件</span>'
              ) // 鼠标悬浮显示的字符串内容
            }
          },
          grid: {
            show: true,
            left: '25px',
            right: '20px',
            bottom: '50px',
            top: '20px',
            containLabel: true
          },
          color: [
            {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#74b2ff' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#7beee8' // 100% 处的颜色
                }
              ],
              global: false // 缺省为 false
            }
          ],
          dataZoom: [
            {
              type: 'slider',
              show: true,
              height: 30,
              xAxisIndex: [0],
              bottom: 0,
              startValue: res[0].length - 12,
              endValue: res[0].length,
              handleIcon:
                'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
              handleSize: '100%',
              handleStyle: {
                color: '#dce2eb'
              },
              textStyle: {
                color: '#303030'
              },
              fillerColor: '#dce2eb',
              borderColor: '#eceef0'
            }
          ],
          series: [
            {
              name: '办理量',
              data: res[1],
              type: 'line',
              symbolSize: 6,
              lineStyle: {
                width: 4,
                shadowColor: 'rgba(116, 178, 255, 0.5)',
                shadowBlur: 10,
                shadowOffsetY: 12
              },
              areaStyle: {},
              label: {
                show: true,
                position: 'top',
                formatter: function (params) {
                  if (params.data > 0) {
                    return params.data
                  } else {
                    return ''
                  }
                },
                color: '#74b2ff'
              }
            }
          ]
        }
        nb_option1 && nb_myChart1.setOption(nb_option1)
        setTimeout(function () {
          window.onresize = function () {
            nb_myChart1.resize()
          }
        }, 100)
        nb_myChart1.on('click', function (param) {
          let month = ''
          if (param.name.length == 2) {
            month = 0 + param.name.slice(0, param.name.length - 1)
          } else if (param.name.length == 3) {
            month = param.name.slice(0, param.name.length - 1)
          } else {
            month = param.name.slice(
              param.name.indexOf('年') + 1,
              param.name.length - 1
            )
          }
          that.date = yearList[param.dataIndex] + '-' + month
          that.orderListChange('month')
        })
      })
    },
    // 获取数据 年度工单来源统计
    async getGdLy () {
      var that = this
      this.$axios.post(this.$api.reportform.getYearGdLy).then(res => {
        const nb_chartDom2 = document.getElementById('annual_card2Echart')
        const nb_myChart2 = echarts.init(nb_chartDom2)
        const nb_option2 = {
          legend: {
            selectedMode: false,
            x: 'right',
            y: '0px',
            icon: 'circle', //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，noneit
            itemWidth: 10, // 设置宽度class
            itemHeight: 10, // 设置高度im
            itemGap: 40 // 设置间距i
          },
          dataset: {
            dimensions: res.dimensions,
            source: res.source
          },
          xAxis: { type: 'category' },
          yAxis: {},
          grid: {
            x: 50,
            y: 70,
            x2: 30,
            y2: 35
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
              textStyle: {
                color: '#fff'
              }
            },
            formatter: function (params) {
              let res = params[0].name
              const colorList = ['#fd9222', '#6756c2', '#67f5c5']
              params.forEach((item, index) => {
                let data = JSON.stringify(item.data)
                let newData = data.split(',')
                let numArray = ['', '']
                newData.forEach(items => {
                  if (items.indexOf('年') > 0) {
                    let year = items.substr(0, items.indexOf(':'))
                    if (year.indexOf('{') == 0) {
                      year = year.substr(1, year.length)
                    }
                    year = JSON.parse(year)
                    if (year == item.seriesName) {
                      let num = items.substr(
                        items.indexOf(':') + 1,
                        items.length - items.indexOf(':')
                      )
                      if (num.indexOf('}') > 0) {
                        num = num.substr(0, num.length - 1)
                      }
                      numArray.splice(item.seriesIndex, 1, num)
                    }
                  }
                })
                res +=
                  '<br/><span style="display: inline-block;width:10px;height:10px;border-radius:100%;background: ' +
                  colorList[index] +
                  ';margin-right:5px;"></span>' +
                  item.seriesName +
                  '<span style="display: inline-block;width: 14px;"></span><span style="font-weight: bold;">' +
                  numArray[index] +
                  '</span><span style="font-size: 10px;"> 件</span>'
              })
              return res
            }
          },
          series: [
            {
              type: 'bar',
              color: '#fd9222',
              barWidth: 24,
              label: {
                show: true,
                position: 'top',
                formatter: function (params) {
                  let data = JSON.stringify(params.data)
                  let newData = data.split(',')
                  let numArray = ['', '']
                  newData.forEach(items => {
                    if (items.indexOf('年') > 0) {
                      let year = items.substr(0, items.indexOf(':'))
                      if (year.indexOf('{') == 0) {
                        year = year.substr(1, year.length)
                      }
                      year = JSON.parse(year)
                      if (year == params.seriesName) {
                        let num = items.substr(
                          items.indexOf(':') + 1,
                          items.length - items.indexOf(':')
                        )
                        if (num.indexOf('}') > 0) {
                          num = num.substr(0, num.length - 1)
                        }
                        numArray.splice(params.seriesIndex, 1, num)
                      }
                    }
                  })
                  if (numArray[0] > 0) {
                    return numArray[0]
                  } else {
                    return ''
                  }
                },
                color: '#fd9222'
              }
            },
            {
              type: 'bar',
              color: '#6756c2',
              barWidth: 24,
              label: {
                show: true,
                position: 'top',
                formatter: function (params) {
                  let data = JSON.stringify(params.data)
                  let newData = data.split(',')
                  let numArray = ['', '']
                  newData.forEach(items => {
                    if (items.indexOf('年') > 0) {
                      let year = items.substr(0, items.indexOf(':'))
                      if (year.indexOf('{') == 0) {
                        year = year.substr(1, year.length)
                      }
                      year = JSON.parse(year)
                      if (year == params.seriesName) {
                        let num = items.substr(
                          items.indexOf(':') + 1,
                          items.length - items.indexOf(':')
                        )
                        if (num.indexOf('}') > 0) {
                          num = num.substr(0, num.length - 1)
                        }
                        numArray.splice(params.seriesIndex, 1, num)
                      }
                    }
                  })
                  if (numArray[1] > 0) {
                    return numArray[1]
                  } else {
                    return ''
                  }
                },
                color: '#6756c2'
              }
            },
            {
              type: 'bar',
              color: '#67f5c5',
              barWidth: 24,
              label: {
                show: true,
                position: 'top',
                formatter: function (params) {
                  let data = JSON.stringify(params.data)
                  let newData = data.split(',')
                  let numArray = ['', '']
                  newData.forEach(items => {
                    if (items.indexOf('年') > 0) {
                      let year = items.substr(0, items.indexOf(':'))
                      if (year.indexOf('{') == 0) {
                        year = year.substr(1, year.length)
                      }
                      year = JSON.parse(year)
                      if (year == params.seriesName) {
                        let num = items.substr(
                          items.indexOf(':') + 1,
                          items.length - items.indexOf(':')
                        )
                        if (num.indexOf('}') > 0) {
                          num = num.substr(0, num.length - 1)
                        }
                        numArray.splice(params.seriesIndex, 1, num)
                      }
                    }
                  })
                  if (numArray[2] > 0) {
                    return numArray[2]
                  } else {
                    return ''
                  }
                },
                color: '#67f5c5'
              }
            }
          ]
        }
        nb_option2 && nb_myChart2.setOption(nb_option2)
        setTimeout(function () {
          window.onresize = function () {
            nb_myChart2.resize()
          }
        }, 100)
        nb_myChart2.on('click', function (param) {
          that.date = param.seriesName.slice(0, param.seriesName.length - 1)
          that.sourceList.forEach(item => {
            if (param.name === item.label) {
              that.sourceId = item.id
              that.orderListChange('year')
            }
          })
        })
      })
    },
    // 获取数据 年度退单量
    async getTdl () {
      var that = this
      this.$axios.post(this.$api.reportform.getYearTdl).then(res => {
        let yearList = []
        let yearIndex = 0
        let year = ''
        res[0].forEach((item, index) => {
          if (item.indexOf('年') > 0) {
            year = item.slice(0, 4)
            yearIndex = index
          }
          if (index >= yearIndex) {
            yearList.push(year)
          }
        })
        const nb_chartDom3 = document.getElementById('annual_card3Echart')
        const nb_myChart3 = echarts.init(nb_chartDom3)
        const nb_option3 = {
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: res[0]
          },
          yAxis: {
            type: 'value'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
              textStyle: {
                color: '#fff'
              }
            },
            formatter: function (params) {
              return (
                params[0].name +
                '<br/><span style="display: inline-block;width:10px;height:10px;border-radius:100%;background: #2826be;margin-right:5px;"></span>' +
                params[0].seriesName +
                '<span style="display: inline-block;width: 14px;"></span><span style="font-weight: bold;">' +
                params[0].value +
                '</span><span style="font-size:12px;"> 件</span>'
              ) // 鼠标悬浮显示的字符串内容
            }
          },
          grid: {
            show: true,
            left: '25px',
            right: '20px',
            bottom: '50px',
            top: '40px',
            containLabel: true
          },
          color: [
            {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#13cc57' // 100% 处的颜色
                },
                {
                  offset: 0.5,
                  color: '#2826be' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#13cc57' // 100% 处的颜色
                }
              ]
            }
          ],
          dataZoom: [
            {
              type: 'slider',
              show: true,
              height: 30,
              xAxisIndex: [0],
              bottom: 0,
              startValue: res[0].length - 12,
              endValue: res[0].length,
              handleIcon:
                'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
              handleSize: '100%',
              handleStyle: {
                color: '#dce2eb'
              },
              textStyle: {
                color: '#303030'
              },
              fillerColor: '#dce2eb',
              borderColor: '#eceef0'
            }
          ],
          series: [
            {
              name: '退单量',
              data: res[1],
              type: 'line',
              smooth: true,
              symbol: 'circle',
              symbolSize: 8,
              lineStyle: {
                width: 4,
                shadowColor: 'rgba(0, 0, 0, 0.3)',
                shadowBlur: 15,
                shadowOffsetY: 12
              },
              label: {
                show: true,
                position: 'top',
                formatter: function (params) {
                  if (params.data > 0) {
                    return params.data
                  } else {
                    return ''
                  }
                },
                color: '#13cc57'
              }
            }
          ]
        }
        nb_option3 && nb_myChart3.setOption(nb_option3)
        setTimeout(function () {
          window.onresize = function () {
            nb_myChart3.resize()
          }
        }, 100)
        nb_myChart3.on('click', function (param) {
          let month = ''
          if (param.name.length == 3) {
            month = param.name.slice(0, param.name.length - 1)
          } else {
            month = param.name.slice(
              param.name.indexOf('年') + 1,
              param.name.length - 1
            )
          }
          that.date = yearList[param.dataIndex] + '-' + month
          that.orderType = 'tuihui'
          that.orderListChange('month')
        })
      })
    },
    // 获取数据 年度超期件
    async getCqj () {
      const that = this
      this.$axios.post(this.$api.reportform.getYearCqj).then(res => {
        let yearList = []
        let yearIndex = 0
        let year = ''
        res[0].forEach((item, index) => {
          if (item.indexOf('年') > 0) {
            year = item.slice(0, 4)
            yearIndex = index
          }
          if (index >= yearIndex) {
            yearList.push(year)
          }
        })
        const nb_chartDom4 = document.getElementById('annual_card4Echart')
        const nb_myChart4 = echarts.init(nb_chartDom4)
        const nb_option4 = {
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: res[0]
          },
          yAxis: {
            type: 'value'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
              textStyle: {
                color: '#fff'
              }
            },
            formatter: function (params) {
              return (
                params[0].name +
                '<br/><span style="display: inline-block;width:10px;height:10px;border-radius:100%;background: #ff9555;margin-right:5px;"></span>' +
                params[0].seriesName +
                '<span style="display: inline-block;width: 14px;"></span><span style="font-weight: bold;">' +
                params[0].value +
                '</span><span style="font-size: 10px;"> 件</span>'
              ) // 鼠标悬浮显示的字符串内容
            }
          },
          grid: {
            show: true,
            left: '25px',
            right: '20px',
            bottom: '50px',
            top: '40px',
            containLabel: true
          },
          color: '#ff9555',
          dataZoom: [
            {
              type: 'slider',
              show: true,
              height: 30,
              xAxisIndex: [0],
              bottom: 0,
              startValue: res[0].length - 12,
              endValue: res[0].length,
              handleIcon:
                'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
              handleSize: '100%',
              handleStyle: {
                color: '#dce2eb'
              },
              textStyle: {
                color: '#303030'
              },
              fillerColor: '#dce2eb',
              borderColor: '#eceef0'
            }
          ],
          series: [
            {
              name: '超期件',
              data: res[1],
              type: 'line',
              smooth: true,
              symbolSize: 10,
              lineStyle: {
                width: 4,
                shadowColor: 'rgba(255, 51, 89, 0.3)',
                shadowBlur: 10,
                shadowOffsetY: 12
              },
              areaStyle: {
                color: '#ffb588'
              },
              label: {
                show: true,
                position: 'top',
                formatter: function (params) {
                  if (params.data > 0) {
                    return params.data
                  } else {
                    return ''
                  }
                },
                color: '#ff9555'
              }
            }
          ]
        }
        nb_option4 && nb_myChart4.setOption(nb_option4)
        setTimeout(function () {
          window.onresize = function () {
            nb_myChart4.resize()
          }
        }, 100)
        nb_myChart4.on('click', function (param) {
          let month = ''
          if (param.name.length == 3) {
            month = param.name.slice(0, param.name.length - 1)
          } else {
            month = param.name.slice(
              param.name.indexOf('年') + 1,
              param.name.length - 1
            )
          }
          that.date = yearList[param.dataIndex] + '-' + month
          that.orderType = 'chaoqiwancheng'
          that.orderListChange('month')
        })
      })
    },
    // 获取数据 年度平均回复周期
    async getHfZq () {
      this.$axios.post(this.$api.reportform.getYearHfZq).then(res => {
        const nb_chartDom5 = document.getElementById('annual_card5Echart')
        const nb_myChart5 = echarts.init(nb_chartDom5)
        const nb_option5 = {
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: res[0]
          },
          yAxis: {
            type: 'value'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
              textStyle: {
                color: '#fff'
              }
            },
            formatter: function (params) {
              return (
                params[0].name +
                '<br/><span style="display: inline-block;width:10px;height:10px;border-radius:100%;background: #7773d5;margin-right:5px;"></span>' +
                params[0].seriesName +
                '<span style="display: inline-block;width: 14px;"></span><span style="font-weight: bold;">' +
                params[0].value +
                '</span><span style="font-size: 10px;"> 天</span>'
              ) // 鼠标悬浮显示的字符串内容
            }
          },
          grid: {
            show: true,
            left: '25px',
            right: '20px',
            bottom: '50px',
            top: '40px',
            containLabel: true
          },
          color: '#7773d5',
          dataZoom: [
            {
              type: 'slider',
              show: true,
              height: 30,
              xAxisIndex: [0],
              bottom: 0,
              startValue: res[0].length - 12,
              endValue: res[0].length,
              handleIcon:
                'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
              handleSize: '100%',
              handleStyle: {
                color: '#dce2eb'
              },
              textStyle: {
                color: '#303030'
              },
              fillerColor: '#dce2eb',
              borderColor: '#eceef0'
            }
          ],
          series: [
            {
              name: '回复周期',
              data: res[1],
              type: 'line',
              smooth: true,
              symbol: 'circle',
              symbolSize: 8,
              lineStyle: {
                width: 4,
                shadowColor: 'rgba(119, 115, 213, 0.3)',
                shadowBlur: 10,
                shadowOffsetY: 12
              },
              label: {
                show: true,
                position: 'top',
                formatter: function (params) {
                  if (params.data > 0) {
                    return params.data
                  } else {
                    return ''
                  }
                },
                color: '#7773d5'
              },
              cursor: 'auto'
            }
          ]
        }
        nb_option5 && nb_myChart5.setOption(nb_option5)
        setTimeout(function () {
          window.onresize = function () {
            nb_myChart5.resize()
          }
        }, 100)
      })
    },
    // 获取数据 年度满意率
    async getMyl () {
      this.$axios.post(this.$api.reportform.getYearMyl).then(res => {
        const nb_chartDom6 = document.getElementById('annual_card6Echart')
        const nb_myChart6 = echarts.init(nb_chartDom6)
        const nb_option6 = {
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: res[0]
          },
          yAxis: {
            type: 'value'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
              textStyle: {
                color: '#fff'
              }
            },
            formatter: function (params) {
              return (
                params[0].name +
                '<br/><span style="display: inline-block;width:10px;height:10px;border-radius:100%;background: #5470C6;margin-right:5px;"></span>' +
                params[0].seriesName +
                '<span style="display: inline-block;width: 14px;"></span><span style="font-weight: bold;">' +
                params[0].value +
                '%</span>'
              ) // 鼠标悬浮显示的字符串内容
            }
          },
          grid: {
            show: true,
            left: '25px',
            right: '20px',
            bottom: '50px',
            top: '40px',
            containLabel: true
          },
          dataZoom: [
            {
              type: 'slider',
              show: true,
              height: 30,
              xAxisIndex: [0],
              bottom: 0,
              startValue: res[0].length - 12,
              endValue: res[0].length,
              handleIcon:
                'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
              handleSize: '100%',
              handleStyle: {
                color: '#dce2eb'
              },
              textStyle: {
                color: '#303030'
              },
              fillerColor: '#dce2eb',
              borderColor: '#eceef0'
            }
          ],
          series: [
            {
              name: '满意率',
              data: res[1],
              type: 'line',
              smooth: true,
              symbol: 'circle',
              symbolSize: 8,
              lineStyle: {
                width: 4,
                shadowColor: 'rgba(119, 115, 213, 0.3)',
                shadowBlur: 10,
                shadowOffsetY: 12
              },
              label: {
                show: true,
                position: 'top',
                formatter: function (params) {
                  if (params.data > 0) {
                    return params.data
                  } else {
                    return ''
                  }
                },
                color: '#7773d5'
              },
              cursor: 'auto'
            }
          ]
        }
        nb_option6 && nb_myChart6.setOption(nb_option6)
        setTimeout(function () {
          window.onresize = function () {
            nb_myChart6.resize()
          }
        }, 100)
      })
    },
    orderListChange (duration) {
      // 年月日类型
      this.duration = duration
      this.orderListShow = true
    },
    clearSearch () {
      this.duration = null
      this.date = null
      this.sourceId = null
      this.orderType = null
    }
  }
}
</script>
<style lang="less" scoped>
.contentBox {
  .el-card {
    width: 100%;
    height: 100%;
  }
  .company {
    top: 60px;
    left: 50px;
  }
  .card1 {
    height: 560px;
    .annual_card1Echart {
      width: 1620px;
      height: 440px;
    }
  }
  .card2 {
    height: 530px;
    .annual_card2Echart {
      width: 1620px;
      height: 480px;
    }
  }
  .card3,
  .card4 {
    height: 560px;
    .annual_card3Echart,
    .annual_card4Echart {
      width: 1620px;
      height: 470px;
    }
  }
  .card5,
  .card6 {
    height: 540px;
    .annual_card5Echart {
      width: 1620px;
      height: 460px;
    }
    .annual_card6Echart {
      width: 1620px;
      height: 460px;
    }
  }
}
</style>
